<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">


    <div class="form-group">
        <label for="c-title" class="control-label col-xs-12 col-sm-2">{:__('Subject')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select class="form-control selectpicker" name="row[subject]">
                {foreach name="subjectList" item="vo"}
                <option value="{$vo.id}">{$vo.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="c-title"  class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-title" data-rule='required' class="form-control" name="row[title]" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label for="c-title" class="control-label col-xs-12 col-sm-2">答案：</label><input type="button" class="btn btn-success" id="addanswer_id" value="添加答案" onclick="addanswer()"/>
        <div class="col-xs-12 col-sm-8">

            <div id="moreanswer">
                <div id="div_0">
                    <input  class="form-control" name="answer[value][]" id="title_0" type="text" value="" style="margin-top:10px;width:250px;">
                    <span style="margin-left:20px;" id="text_0" onclick="dj(0)" class="btn btn-more btn-primary">选中答案</span>
                    <span style="margin-left:20px;" id="del_0" onclick="del(0)" class="btn btn-danger">删除</span>
                    <input name="answer[ok][]" type="hidden" value="2" id="answer_0" />
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:build_radios('row[type]', ['1'=>__('Type1'), '2'=>__('Type2'), '3'=>__('Type3')])}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:build_radios('row[status]', ['1'=>__('Normal'), '2'=>__('Hidden')])}
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    var checkNum = 0;
    function addanswer(){
        checkNum++;
        $("#moreanswer").append('<div id="div_'+checkNum+'"><input  class="form-control" name="answer[value][]" id="title_'+checkNum+'" type="text" value="" style="margin-top:10px;width:250px;"><span style="margin-left:20px;" id="text_'+checkNum+'" onclick="dj('+checkNum+')" class="btn btn-more btn-primary">选中答案</span><span style="margin-left:20px;" id="del_'+checkNum+'" onclick="del('+checkNum+')" class="btn btn-danger">删除</span><input name="answer[ok][]" type="hidden" value="2" id="answer_'+checkNum+'" /></div>');
    }
    function del(n){
        $("#div_"+n).remove();
    }

    function dj(n){
        var title = $("#title_"+n).val();
        if(title == ""){
            alert('答案不能为空！');
            return;
        }
        var zhi = $("#answer_"+n).val();
        if(zhi == 2){
            $("#text_"+n).addClass("btn-success"); // 追加样式
            $("#text_"+n).removeClass("btn-more btn-primary"); //移除
//            $("#text_"+n).css("color",'#00ff00');
            $("#answer_"+n).val('1');
            $("#text_"+n).html('正确答案');
        } else {
            $("#text_"+n).addClass("btn-more btn-primary"); // 追加样式
            $("#text_"+n).removeClass("btn-success"); //移除
//            $("#text_"+n).css("color",'#000000');
            $("#answer_"+n).val('2');
            $("#text_"+n).html('选中答案');
        }

    }


    $(document).ready(function(){
        $("[name='row[type]']").click(function(){
            if($(this).val() == 3){
                $("#addanswer_id").hide();
                $("#moreanswer").html('<div id="div_0"><input  class="form-control" name="answer[value][]" id="title_0" type="text" readonly="readonly" value="对" style="margin-top:10px;width:250px;"><span style="margin-left:20px;" id="text_0" onclick="dj(0)" class="btn btn-more btn-primary">选中答案</span><input name="answer[ok][]" type="hidden" value="2" id="answer_0" /></div><div id="div_1"><input  class="form-control" name="answer[value][]" id="title_1" type="text" readonly="readonly" value="错" style="margin-top:10px;width:250px;"><span style="margin-left:20px;" id="text_1" onclick="dj(1)" class="btn btn-more btn-primary">选中答案</span><input name="answer[ok][]" type="hidden" value="2" id="answer_1" /></div>');
            } else {
                $("#addanswer_id").show();
                $("#moreanswer").html('<div id="div_0"><input  class="form-control" name="answer[value][]" id="title_0" type="text" value="" style="margin-top:10px;width:250px;"><span style="margin-left:20px;" id="text_0" onclick="dj(0)" class="btn btn-more btn-primary">选中答案</span><span style="margin-left:20px;" id="del_0" onclick="del(0)" class="btn btn-danger">删除</span><input name="answer[ok][]" type="hidden" value="2" id="answer_0" /></div>');
            }

        });
    });
</script>
